<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="header-warp">
          <div class="warp">
            <img src="../../../assets/images/home/notice.png" />
          </div>
          <div class="header-word">公告</div>
        </div>
        <div class="more">更多></div>
      </div>
    </template>
    <div class="new-list-box">
      <ul class="lists">
        <li class="list-item" v-for="(item, index) in data" :key="index">
          <div class="new-icon" v-if="item.isNew">
            <img :src="newIcon" />
          </div>
          <div class="list-item-title ellipsis">{{ item.title }}</div>
          <div class="list-item-time">
            <span>{{ item.time.month }}</span>
            <span>{{ item.time.time }}</span>
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
import newIcon from '@/assets/images/home/new.png';
export default {
  name: 'notice-card',
  data() {
    return {
      newIcon,
      data: [
        {
          title: '省交通科学研究院学习贯彻全国两会精神院学习贯彻全国两会精神院学习贯彻全国两会精神',
          time: {
            month: '8月7日',
            time: '15:05',
          },
          isNew: true,
        },
        {
          title: '省交通科学研究院学习贯彻全国两会精神院学习贯彻全国两会精神院学习贯彻全国两会精神',
          time: {
            month: '8月7日',
            time: '15:05',
          },
        },
      ],
    };
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/style/common.scss';
.card-header {
  display: flex;
  background-color: #ffffff;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  height: 47px;
  padding: 0 20px;
  .more {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #a4a5a9;
    cursor: pointer;
  }
}

.new-list-box {
  padding: 20px;
  .lists {
    .list-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .new-icon {
        margin-right: 10px;
        height: 17px;
      }
      .list-item-title {
        @include ellipsis;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        flex: 1;
      }
      .list-item-time {
        font-size: 12px;
        font-weight: 400;
        color: #a4a5a9;
        width: 75px;
        text-align: right;
        span {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #989da3;
          &:first-child {
            margin-right: 5px;
          }
        }
      }
    }
  }
}

:deep(.el-card__header) {
  padding: 0;
  background-color: #ffffff !important;
}
.header-warp {
  display: flex;
  .warp {
    margin-right: 7px;
    width: 16px;
    height: 16px;
    padding-top: 2px;
  }
  .header-word {
    font-weight: 700;
  }
}


</style>
